
<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:注册页面
@author:成都市一颗优雅草科技有限公司     
@version V3.7 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->

<template>
	<view>
		<view class="head">
			<view class="left-wrapper" @click="back">
				<uni-icons color="#000000" class="back" size="30" type="arrowleft" />
			</view>
			<view class="search-wrapper">
				<view></view>
			</view>
			<view class="right-wrapper">

			</view>
		</view>
		<view class="content">
			<view class="login-wrapper">
				<view class="login-title">
					<text>注册</text>
				</view>
				<input class="login-input" type="text" placeholder="用户名" placeholder-class="input-placeholder" v-model="username" />
				<input class="login-input code-input" type="text" placeholder="邮箱号" placeholder-class="input-placeholder" v-model="mail" />
				<view class="code-wrapper">
					<input class="login-input code-input" type="text" placeholder="请输入邮箱验证码" placeholder-class="input-placeholder" v-model="vcode" />
					 
					<text class="send-btn" @tap="sendCode">{{isSend?time:'发送验证码'}}</text>
				</view>
				<input class="login-input" type="password" placeholder="密码" placeholder-class="input-placeholder" v-model="password" />
				<input class="login-input" type="password" placeholder="确认密码" placeholder-class="input-placeholder" v-model="confirmPassword" />
				<input class="login-input" type="text" placeholder="邀请码" placeholder-class="input-placeholder" v-model="inviteCode" />
				<button class="login-btn" @tap="register" v-on:click="Registertj" >同意规则并普通注册</button>
				<text class="other-login-text" @tap="toLogin">登录 ></text>
				<view class="login-tips">
					<text>注册表示同意"</text><text class="active" @tap="userAgreement">用户协议</text><text>"和"</text><text class="active" @tap="privacyProtocol">隐私政策</text>"
				</view>
			</view>
			<view class="other-login">
				<view class="other-title">
					<text>更多登陆方式</text>
				</view>
				<view class="other-login-type-wrapper">
					<view class="item-other-login" @tap="loginType(0)">
						<image src="../../static/icon/weixin.png"></image>
						<text>微信</text>
					</view>
					<view class="item-other-login" @tap="loginType(1)"> 
						<image src="../../static/icon/weibo.png"></image>
						<text>微博</text>
					</view>
					<view class="item-other-login" @tap="loginType(2)">
						<image src="../../static/icon/qq.png"></image>
						<text>QQ</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		components: {
			uniIcons,
		},
		data() {
			return {
				username: '',
				password: '',
				inviteCode:'',
				mail:"",
				
				mailInterval: null,
				time: 60,
				isSend: false,
			}
		},
		methods: {
			
			
			
			
		// 	...mapMutations(['IMlogin']),
		// 	// ImLogin
		// 	IM_login(userInfo){
		// 		var loginparams = {
		// 			"username": userInfo.username,
		// 			"password": userInfo.password
		// 		}
		// 		uni.showLoading();
		// 		this.jpushIM.userLogin(loginparams, (res) => {
		// 			uni.hideLoading();
		// 			if(res.errorCode == 0){
		// 				this.jpushIM.updateMyInfo({
		// 					'extras':{
		// 						"head_img":userInfo.avatar
		// 					}
		// 				}, (res) => {
		// 					console.log("updataHeadImg");
		// 					console.log(res);
		// 				})
		// 				this.IMlogin(userInfo.username);
		// 				console.log("IM登录成功")
		// 			}else{
		// 				uni.showModal({
		// 					title: 'IM登录失败',
		// 					content: "原因：" + res.errorMsg,
		// 					showCancel: false,
		// 					cancelText: '',
		// 					confirmText: '确定',
		// 					success: res => {	
		// 						if (res.confirm) {
		// 							console.log("点击了确定按钮");
		// 						} 
		// 					}
		// 				});
		// 			}
		// 		})
		// 	},
			
		
			// // IMRegister
			// IMRegister(userInfo){
			// 	console.log(userInfo);
			// 	var IMUserInfo;
			// 	if(userInfo.phone){
			// 		IMUserInfo = userInfo.phone;
			// 	}else if(userInfo.mail){
			// 		IMUserInfo = userInfo.mail;
			// 	}else if(userInfo.qq){
			// 		IMUserInfo = userInfo.qq;
			// 	}else{
			// 		IMUserInfo = userInfo.name;
			// 	}
			// 	var params = {
			// 		"username": IMUserInfo,
			// 		"password": IMUserInfo,
			// 		"nickname": userInfo.name,
			// 		"avatar": userInfo.head_img,
			// 		"extras":{
			// 			"head_img":userInfo.head_img
			// 		}
			// 	}
			// 	uni.showLoading();
			// 	this.jpushIM.userRegister(params, (res) => {
			// 		uni.hideLoading();
			// 		console.log("------------");
			// 		if(res.errorCode == 0 || res.errorCode == 898001){
			// 			this.IM_login(params);
			// 		}else{
			// 			uni.showModal({
			// 				title: 'IM注册失败',
			// 				content: "原因：" + res.errorMsg,
			// 				showCancel: false,
			// 				cancelText: '',
			// 				confirmText: '确定',
			// 				success: res => {	
			// 					if (res.confirm) {
			// 						console.log("点击了确定按钮");
			// 					} 
			// 				}
			// 			});
			// 		}
			// 	})
			// },
			sendCode() {
				if (this.isSend) {
					return;
				}
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if (this.mail == '' || !reg.test(this.mail)) {
					uni.showToast({
						title: '请输入正确的邮箱号',
						icon: 'none'
					});
					return;
				}
				this.$api.sendMail({
					mail: this.mail
				}).then((res) => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '发送失败',
							icon: 'none'
						});
						return;
					}
					uni.showToast({
						title: '发送成功'
					});
					this.isSend = true;
					this.mailInterval = setInterval(() => {
						if (this.time > 0) {
							this.time--;
						} else {
							clearInterval(this.mailInterval);
							this.isSend = false;
							this.time = 60;
						}
					}, 1000);
				}).catch(e => {
					uni.showToast({
						title: '发送失败',
						icon: 'none'
					});
				});
			},
			toLogin(){
				uni.redirectTo({
					url:'./login-user-pass'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			loginType(typeid) {
				switch (typeid) {
					case 0:
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								//console.log(loginRes.authResult);
							},
							fail: (res) => {
								//console.log(res);
							}
						});

						break;
					case 1:
						uni.login({
							provider: 'sinaweibo',
							success: function(loginRes) {
								//console.log(loginRes.authResult);
							},
							fail: (res) => {
								console.log(res);
							}
						});

						break;
					case 2:
						uni.login({
							provider: 'qq',
							success: function(loginRes) {
								//console.log(loginRes.authResult);
							},
							fail: (res) => {
								//console.log(res);
							}
						});
						break;
				}
			},
		userAgreement() {
			uni.navigateTo({
				url: '/pages/webview?url='+encodeURIComponent('https://songshu.youyacao.com/detail/220.html'),
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		privacyProtocol() {
			uni.navigateTo({
				url: '/pages/webview?url='+encodeURIComponent('https://songshu.youyacao.com/detail/221.html'),
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
			register(){
				if(this.username==''){
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if(this.mail==''||!reg.test(this.mail)){
					uni.showToast({
						title: '请输入正确的邮箱号',
						icon: 'none'
					});
					return;
				}
				if(this.vcode==''){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				if(this.password==''){
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				if(this.username.length<6){
					uni.showToast({
						title: '用户名最少6位',
						icon: 'none'
					});
					return;
				}
				if(this.password.length<6){
					uni.showToast({
						title: '密码最少6位',
						icon: 'none'
					});
					return;
				}
				if(this.password!=this.confirmPassword){
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					});
					return;
				}
				
				this.$api.userRegister({username:this.username,password:this.password,mail:this.mail,vcode:this.vcode,invitecode:this.inviteCode}).then(res=>{
					if (res.data.code == 1) {
						uni.showToast({
							title: '注册失败,' + res.data.msg,
							icon:'none'
						});
						return;
					}
					
					
					
					
			
					uni.showToast({
						title: '注册成功',
						icon: 'none',
						duration: 1000,
						complete: () => {
							uni.navigateBack({
								delta: 1
							});
							
							
							
							
							
						}
					});
				// //增加openinstall 统计
				
				// Registertj:function(even){
				// 				//  console.log('button click')
				// 				const openinstall = uni.requireNativePlugin('openinstall-plugin');
				// 				openinstall.reportRegister();
				// 			};
				
					
					// //IM注册
					// this.IMRegister({name:this.username,head_img:"../../static/img/im/chat_icon.png",mail:this.mail});
					//登陆成功
					this.$store.dispatch('getUserInfo');
					
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		background: $uni-bg-color;
	}

	.head {

		align-items: center;
		position: fixed;
		//#ifdef APP-PLUS
		padding-top: 44rpx;
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background: $uni-bg-color;
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88rpx;
		// background-color: red;
	}

	.left-wrapper {
		margin-left: 12rpx;
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
	}

	.right-wrapper {
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
		margin-right: 24rpx;
	}

	.search-wrapper {
		text-align: center;
		line-height: 76rpx;
		height: 76rpx;
		// background: #09BB07;
		flex: 10;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: center;

		text {
			line-height: 76rpx;
			height: 76rpx;
		}
	}

	.search {
		height: 88rpx;
		line-height: 88rpx;
		flex: 1;
	}

	.content {
		height: 800rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		padding-top: 88rpx;
		//#ifdef APP-PLUS
		padding-top: 128rpx;
		//#endif
		height: 100%;
		width: 100%;
	}

	.login-wrapper {
		flex: 9;
		padding: 76rpx;
		padding-bottom: 120rpx;

		.login-title {
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: 400;

		}

		.login-input {

			margin-top: 64rpx;
			border-bottom: 1rpx solid rgba($color: #000000, $alpha: .2);
			padding-top: 12rpx;
			padding-bottom: 18rpx;
		}

		.code-input {
			padding-right: 160rpx;
		}

		.input-placeholder {
			color: rgba($color: #000000, $alpha: .3);
		}

		.code-wrapper {
			position: relative;

			.send-btn {

				display: inline-block;
				height: 64rpx;
				position: absolute;
				right: 8rpx;
				top: 18rpx;
			}
		}

		.other-login-text {
			line-height: 38rpx;
			text-align: center;
			margin: 24rpx auto;
			color: $uni-text-color-active;
			display: flex;
			justify-content: center;
		}

		.login-btn { 
			margin-top: 48rpx;
			font-size: 36rpx;
			background-color: $uni-text-color-active;
			color: $uni-text-color-inverse;
			border-radius: 50rpx;
		}
			
		.login-tips {
			height: 50rpx;
			width: 100%;
			text-align: center;
			margin-top: 48rpx;
			margin-bottom: 48rpx;
			font-size: 24rpx;
			color: #666;
		}
		.register-btn {
			margin-top: 24rpx;
			font-size: 36rpx;
			background-color: $uni-text-color-active;
			color: $uni-text-color-inverse;
			border-radius: 50rpx;
		}
	}

	.other-login {
		padding: 76rpx;
		flex: 3;

		.other-title {
			text-align: center;
			position: relative;

			text {
				z-index: 1;
				padding: 24rpx;
				font-size: 26rpx;
				color: rgba($color: #000000, $alpha: .5);

				&:before {
					content: '';
					position: absolute;
					top: 48%;
					height: 1rpx;
					background: rgba($color: #000000, $alpha: .1);
					left: 0;
					width: 30%;
				}

				&:after {
					content: '';
					position: absolute;
					top: 48%;
					height: 1rpx;
					background: rgba($color: #000000, $alpha: .1);
					right: 0;
					width: 30%;
				}
			}
		}

		.other-login-type-wrapper {
			margin: 64rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.item-other-login {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				flex: 1;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				text {
					font-family: PingFang SC;
					margin-top: 12rpx;
					color: rgba($color: #000000, $alpha: .4);
				}
			}
		}
	}
</style>
